<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>
        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。
            不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
            表达式结果的类型除了字符串之外，还可以是对象或数组。 -->

        <!-- 对象语法 -->
        <!-- active 这个 class 存在与否将取决于数据 property isActive 的 truthiness（即真值）  (键加不加引号都一样)-->
        <div :class="{ active: isActive, 'text-danger': hasError }">绑定HTML Class</div>
        <!-- 在对象中传入更多字段来动态切换多个 class，v-bind:class 指令也可与普通的 class attribute 共存 -->
        <div class="static" :class="{ active: isActive, 'text-danger': hasError }">绑定HTML Class</div>
        <!-- 绑定的数据对象不必内联定义在模板里： -->
        <div :class="classObject">绑定HTML Class</div>
        <!-- 绑定一个返回对象的计算属性 -->
        <div :class="classObjectComputed"></div>

        <!-- 数组语法 -->
        <div :class="[activeClass, errorClass]"></div>
        <!-- 根据条件切换列表中的 class，可以用三元表达式： -->
        <div :class="[isActive ? activeClass : '', errorClass]"></div>
        <!-- 当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法： -->
        <div :class="[{ active: isActive }, errorClass]"></div>

        <!-- 用在组件上 -->
        <!-- HTML 将被渲染为：<p class="foo bar baz boo">哈哈</p> -->
        <my-component class="baz boo"></my-component>
        <my-component :class="{ active: isActive }"></my-component>
    </div>

    <script>
        Vue.component('my-component', {
            template: '<p class="foo bar">哈哈</p>'
        })

        var vm = new Vue({
            el: "#app",
            data: {
                isActive: true,
                hasError: true,

                classObject: {
                    active: true,
                    'text-danger': false
                },

                activeClass: 'active',
                errorClass: 'text-danger'
            },
            computed: {
                classObjectComputed: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            },
        })
    </script>
</body>

</html>